<template>
    <div>
        <van-tabbar v-model="active">
            <van-tabbar-item v-for="nav in footerNav" :url="nav.url" :key="nav.id" :icon="nav.icon">
                {{ nav.name }}
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant';
import { Icon } from 'vant';
import { createApp } from 'vue';
const app = createApp()
app.use(Icon);
app.use(Tabbar);
app.use(TabbarItem);
export default {
    created() {
        // 获取当前路径
        let currentPath = this.$route.path
        // 找下标x 
        let index = this.footerNav.findIndex(item => item.url === '#' + currentPath)
        // 将index赋值为当前数据index
        this.index = index
        // 改变vuex中的active
        this.$store.commit('changeActive', this.index)
    },
    computed: {
        active: {
            get () {
                return this.$store.state.active
            },
            set () {
                this.$store.commit('changeActive',this.index)
            }
        }
    },
    data () {
        return {
            index: 0,
            footerNav: [
            {
                name: '电影',
                id: 1,
                icon: 'play-circle-o',
                url: '#/movie/nowplaying'
            },
            {
                name: '影院',
                id: 2,
                icon: 'photo-o',
                url: '#/cinema'
            },
            {
                name: '资讯',
                id: 3,
                icon: 'label-o',
                url: '#/news'
            },
            {
                name: '我的',
                id: 4,
                icon: 'user-circle-o',
                url: '#/my'
            },
            ]
        }
    },
    methods: {
        
    }
}
</script>

<style>
    
</style>
